<!--
 * @Author: wangming
 * @Date: 2021-12-01 16:38:11
 * @LastEditors: wangming
 * @LastEditTime: 2022-02-22 14:24:52
 * @FilePath: /hanma-application-designer-fed/src/pages/messageCenter/index/notice/__components__/DetailModal.vue
 * @Description: 
-->
<template>
  <el-dialog :visible="visible" center :show-close="false" width="600px">
    <div class="b g3 f16 tl" slot="title">
      <div class="ks-row-between pl15 pr15">
        <span>{{$t('sys.message_details')}}</span>
        <span class="el-icon-close g9 f26 poi" @click="handleCancel"></span>
      </div>
    </div>
    <el-form
      class="pl30 pr30 reset-form-label"
      :model="form"
      ref="form"
      label-width="120px"
    >
      <el-form-item :label="$t('sys.upgrade_notification_CODE')">
        <span>{{ code }}</span>
      </el-form-item>
      <el-form-item :label="$t('sys.template_message_CODE')">
        <span>{{ templateCode }}</span>
      </el-form-item>
      <el-form-item :label="$t('sys.parameter')">
        <span>{{ parametersJson }}</span>
      </el-form-item>
      <el-form-item :label="$t('sys.create_time')">
        <span>{{ createDate | moment }}</span>
      </el-form-item>
      <el-form-item :label="$t('sys.execution_cycle')">
        <span>{{ cycle }}</span>
      </el-form-item>
      <el-form-item :label="$t('sys.current_execution_level')">
        <span>{{ level }}</span>
      </el-form-item>
      <el-form-item :label="$t('sys.status')">
        <span v-if="status === 0">{{$t('sys.closed')}}</span>
        <span v-if="status === 1">{{$t('sys.in_execution')}}</span>
        <span v-if="status === 2">{{$t('sys.unexecuted')}}</span>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  name: "NoticeDetailModal",
  data() {
    return {
      visible: false,
      form: {},
      appName: "",
      code: "",
      cycle: "",
      level: "",
      parametersJson: "",
      status: 0,
      templateCode: "",
      createDate: "",
    };
  },
  methods: {
    show(record) {
      this.visible = true;
      const {
        appName,
        code,
        cycle,
        level,
        parametersJson,
        status,
        templateCode,
        createDate,
      } = record;
      this.appName = appName;
      this.code = code;
      this.cycle = cycle;
      this.level = level;
      this.parametersJson = parametersJson;
      this.status = status;
      this.templateCode = templateCode;
      this.createDate = createDate;
    },
    handleCancel() {
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.reset-form-label {
  ::v-deep .el-form-item__label {
    font-weight: 700;
    color: #333;
  }
}
</style>
